import React from 'react';
import { Modal, Form, Input, Row, Col, DatePicker } from 'antd';
import {
  ymd
  // ONSTATUS
} from 'configs/constants';
// import { isEmpty } from 'utils/share';
import {
  AutoSearch
} from 'components/common';
import {
  getList as getCList
} from 'services/company';
import { getEquipmentDetail } from 'services/equipment';
import {
  getList as getUList
} from 'services/user';
import { mobile } from 'configs/rules';
import InputNumberGroup from 'components/common/InputNumberGroup';
import moment from 'moment';

const FormItem = Form.Item;
const maxVal = 10000;

class AddModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      record: {}
    };
    this.onOK = this.onOK.bind(this);
  }

  async componentDidMount() {
    const { getUserList, record = {} } = this.props;
    record.id && await getUserList({ companyId: record.companyId });
    const { data } = await getEquipmentDetail({ id: record.id });
    this.setState({ record: data });

  }

  onOK() {
    const { onOK, form, onCancel, record, getList } = this.props;
    form.validateFields((err, values) => {
      if (!err) {
        values.initTime = values.initTime ? moment(values.initTime).format(ymd) : undefined;
        onOK({ ...values, id: record.id }).then(() => {
          onCancel();
          getList();
        });
      }
    });
  }

  render() {
    const { onCancel, form, loading, getCompanyList, companyList,
      userList, getUserList } = this.props;
    const { getFieldDecorator, setFieldsValue } = form;
    const { record } = this.state;
    const modalOpts = {
      confirmLoading: loading,
      title: `${record.id ? '编辑' : '创建'}设备`,
      width: 850,
      visible: true,
      maskClosable: false,
      okText: '确定',
      cancelText: '取消',
      onOk: this.onOK,
      onCancel
    };
    const formItemLayout = {
      labelCol: {
        span: 7
      },
      wrapperCol: {
        span: 15
      }
    };

    const companyProps = {
      preSearch: true,
      placeholder: '请选择公司名称',
      preFetchList: getCompanyList,
      dataSource: companyList,
      fetchList: getCList,
      result: data => data.data.data,
      onSelect: (params) => {
        setFieldsValue({ userId: '' });
        getUserList({ companyId: params.id });
      },
      searchKey: 'name',
      keys: ['name']
    };
    const userProps = {
      handleClear: true,
      // preSearch: true,
      placeholder: '请选择用户',
      // preFetchList: getUserList,
      dataSource: userList,
      fetchList: getUList,
      result: data => data.data.data,
      searchKey: 'name',
      keys: ['name']
    };
    return (
      <Modal {...modalOpts}>
        <Form>
          <Row>
            <Col span={12}>
              <FormItem
                label='设备名称'
                {...formItemLayout}
              >
                {
                  getFieldDecorator('name', {
                    initialValue: record.name || '',
                    rules: [{ required: true, message: '请填写设备名称' }]
                  })(
                    <Input
                      maxLength={30}
                      placeholder='设备名称'
                    />
                  )
                }
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem
                label='初次安装里程'
                {...formItemLayout}
              >
                {
                  getFieldDecorator('initDistance', {
                    initialValue: record.initDistance || '',
                    rules: []
                  })(
                    <InputNumberGroup
                      min={0}
                      max={maxVal}
                      precision={2}
                      placeholder='初次安装里程'
                      addonAfter="公里"
                    />
                  )
                }
              </FormItem>
            </Col>
            {/* <Col span={12}>
              <FormItem
                label='数据模版'
                {...formItemLayout}
              >
                {
                  getFieldDecorator('dataTemplateId', {
                    initialValue: record.dataTemplateId || '',
                    rules: [{ required: true, message: '请填写数据模版' }]
                  })(
                    <Input
                      placeholder='数据模版'
                    />
                  )
                }
              </FormItem>
            </Col> */}
          </Row>
          {/* <Row>
            <Col span={12}>
              { <FormItem
                label='状态'
                {...formItemLayout}
              >
                {
                getFieldDecorator('onlineStatus', {
                  initialValue: !isEmpty(record.onlineStatus) ? `${record.onlineStatus}` : undefined,
                  rules: [
                    { required: true, message: '状态不能为空' }
                  ]
                })(
                  <Select
                    placeholder='请选择状态'
                  >
                    {
                    Object.keys(ONSTATUS).map((item, key) => 
                      <Option value={item} key={item}>{ONSTATUS[item]}</Option>)
                    }
                  </Select>
                )
              }
              </FormItem> 
            </Col>
            
          </Row> */}
          <Row>
            <Col span={12}>
              <FormItem
                label='车牌号码'
                {...formItemLayout}
              >
                {
                  getFieldDecorator('plateNo', {
                    initialValue: record.plateNo || '',
                    rules: []
                  })(
                    <Input
                      maxLength={30}
                      placeholder='车牌号码'
                    />
                  )
                }
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem
                label='公司名称'
                {...formItemLayout}
              >
                {
                  getFieldDecorator('companyId', {
                    initialValue: record.companyId || '',
                    rules: []
                  })(
                    <AutoSearch {...companyProps} />
                  )
                }
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <FormItem
                label='用户名称'
                {...formItemLayout}
              >
                {
                  getFieldDecorator('userId', {
                    initialValue: record.userId,
                    rules: [
                      { required: true, message: '请选择用户' }
                    ]
                  })(
                    <AutoSearch {...userProps} />
                  )
                }
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem
                label='初次安装时间'
                {...formItemLayout}
              >
                {
                  getFieldDecorator('initTime', {
                    initialValue: (record.initTime && moment(record.initTime)) || null,
                    rules: []
                  })(
                    <DatePicker
                      maxLength={30}
                      placeholder='初次安装时间'
                    />
                  )
                }
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <FormItem
                label='车主姓名'
                {...formItemLayout}
              >
                {
                  getFieldDecorator('driverName', {
                    initialValue: record.driverName || '',
                    rules: []
                  })(
                    <Input
                      maxLength={30}
                      placeholder='车主姓名'
                    />
                  )
                }
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem
                label='车主电话号码'
                {...formItemLayout}
              >
                {
                  getFieldDecorator('driverPhone', {
                    initialValue: record.driverPhone || '',
                    rules: [mobile]
                  })(
                    <Input
                      maxLength={30}
                      placeholder='车主电话号码'
                    />
                  )
                }
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <FormItem
                label='设别类号代码'
                {...formItemLayout}
              >
                {
                  getFieldDecorator('deviceType', {
                    initialValue: record.deviceType || undefined,
                    rules: []
                  })(
                    <Input
                      placeholder='设别类号代码'
                    />
                  )
                }
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem
                label='排量'
                {...formItemLayout}
              >
                {
                  getFieldDecorator('displacement', {
                    initialValue: record.displacement || undefined,
                    rules: []
                  })(
                    <InputNumberGroup
                      min={0}
                      max={maxVal}
                      precision={2}
                      placeholder='排量'
                      addonAfter="升"
                    />
                  )
                }
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <FormItem
                label='功率'
                {...formItemLayout}
              >
                {
                  getFieldDecorator('power', {
                    initialValue: record.power || '',
                    rules: []
                  })(
                    <InputNumberGroup
                      min={0}
                      max={maxVal}
                      precision={2}
                      placeholder='功率'
                      addonAfter="瓦特"
                    />
                  )
                }
              </FormItem>
            </Col>
          </Row>
        </Form>
      </Modal>
    );
  }
}

export default Form.create()(AddModal);
